<template>
    <div class="recite">
        <div class="header">
            <div class="swiper">
                <div class="topic">
                    {{nowChose.title}}
                    <div class="right" @click="nextPage">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="left" v-if="nowIndex>0" @click="nowIndex--">
                        <i class="el-icon-arrow-left"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="key_word_wrap" id="value">
            </div>
            <div class="recite-title">记忆口诀</div>
            <div class="recite-value">
                {{this.nowChose.remember}}
            </div>
            <div class="recite-title">重要级别</div>
            <div class="level">
                <img src="https://zhonghefakao.oss-cn-zhangjiakou.aliyuncs.com/images/question/beisong/level1.png" alt="">
                重要知识点
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <div class="btn" :class="unknow?'not':''" @click="pick(0)">
                    未掌握
                </div>
                <div class="btn" :class="know?'get':''" @click="pick(1)">
                    已掌握
                </div>
                    <!-- <img src="https://zhonghefakao.oss-cn-zhangjiakou.aliyuncs.com/images/question/beisong/mark.png" alt=""> -->
                <!-- <div class="mark">
                    <img src="https://zhonghefakao.oss-cn-zhangjiakou.aliyuncs.com/images/question/beisong/noMark.png" alt="">
                    标记为重要
                </div> -->
            </div>
            <div class="right">
                <div class="btn" @click="nowIndex--" v-if="nowIndex>0">
                    <img src="https://zhonghefakao.oss-cn-zhangjiakou.aliyuncs.com/images/question/beisong/left.png" alt="">
                    <span>上一题</span>
                </div>
                <div class="btn" @click="nextPage">
                    <span>下一题</span>
                    <img src="https://zhonghefakao.oss-cn-zhangjiakou.aliyuncs.com/images/question/beisong/right.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[
                
            ],
            know:false,
            unknow:false,
            nowChose:{},
            nowIndex:-1,
            user:{}
        }
    },
    computed:{
        type(){
            return this.$route.params.type
        }
    },
    watch:{
        nowChose:{
            handler(newv){
                // console.log(newv);
                // console.log(document.getElementById('value'));
                document.getElementById('value').innerHTML=newv.value
            },
            deep:true
        },
        nowIndex:{
            handler(newv){
                // console.log(newv);
                this.nowChose = this.list[newv]
                let arr= this.user[this.type]
                this.know =arr.grasp.indexOf(this.nowChose.id)>-1;
                this.unknow = arr.ungrasp.indexOf(this.nowChose.id)>-1;
                    
            }
        },
        user:{
            handler(newv,oldv){
                if(oldv!={}){
                    this.$sl('nowUser',newv)
                    let user =this.$gl('userInfo')
                    let user2 = this.$gl('userInfo')
                    user.forEach(item,index=>{
                        if(item.account==newv.account){
                            user2[index] = newv
                        }
                    })
                    this.$sl('userInfo',user2)
                }
            },
            deep:true
        }
    },
    mounted(){
        let type= this.$route.params.type
        this.init(type)
        console.log(type);
        this.user = this.$gl('nowUser')
        this.user.last = type
    },
    methods:{
        init(type){
            let arr =[]
            switch(type){
                case 'xf':
                    arr =JSON.parse(JSON.stringify(xfList))
                    break;
                case 'mf':
                    arr = JSON.parse(JSON.stringify(mfList))
                    break;
                case 'fl':
                    arr = JSON.parse(JSON.stringify(flList))
                    break;
                case 'zgxf':
                    arr = JSON.parse(JSON.stringify(zgxfList))
                    break;
                case 'fzs':
                    arr = JSON.parse(JSON.stringify(fzsList))
                    break;
                default:
                    break;
            }
                // console.log(arr);
            this.list =arr.sort(()=>{
                return (Math.random()-0.5);
            }).splice(0,4)
            this.nowIndex = 0
        },
        pick(val){
            let arr= this.user[this.type]
            let index1 = arr.grasp.indexOf(this.nowChose.id)
            let index2 = arr.ungrasp.indexOf(this.nowChose.id)
            if(val){
                if(this.unknow){
                    this.user[this.type].ungrasp.splice(index2, 1)
                    this.user[this.type].grasp.push(this.nowChose.id)
                }
                if(!this.unknow&&!this.know){
                    this.user[this.type].grasp.push(this.nowChose.id)
                }
            }else{
                if(this.know){
                    this.user[this.type].grasp.splice(index1, 1)
                    this.user[this.type].ungrasp.push(this.nowChose.id)
                }
                if(!this.unknow&&!this.know){
                    this.user[this.type].ungrasp.push(this.nowChose.id)
                }
            }
            this.nextPage()
        },
        nextPage(){
            if(this.nowIndex==this.list.length-1){
                alert('你已经学完这组卡片')
                this.$router.back()
            }else{
                this.nowIndex++

            }
        }
    }
}
</script>
<style lang="less" scoped>
.recite{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header{
        width: 1200px;
        height: 353px;
        position: relative;
        background-image: url('../assets/img/header.png');
        background-size: 100% 100%;
        .swiper{
            width: 80%;
            margin: 8% 10% 0 10%;
            .topic{
                width: 100%;
                height: 220px;
                border-radius: 20px;
                background-color: rgba(255, 255, 255, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 47px;
                font-size: 25px;
                font-weight: 500;
                text-align: center;
                color: #3270b6;
                position: relative;
                line-height: 36px;
                .right{
                    position: absolute;
                    right: 0;
                    top: 0;
                    height: 90%;
                    width: 10%;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .left{
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 90%;
                    width: 10%;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .content{
        position: relative;
        /* top: 280px; */
        margin-top: -80px; 
        height: calc(100% - 270px);
        padding: 30px;
        width: 1200px;
        background: #ffffff;
        padding-top: 24px;
        padding-bottom: 0;
        border-radius: 30px 30px 10px 10px;
        .recite-title{
            font-size: 18px;
            font-weight: 500;
            text-align: left;
            color: #111a34;
            line-height: 18px;
            margin-bottom: 13px;
        }
        .recite-value{
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #666f83;
            line-height: 30px;
            margin-bottom: 30px;
        }
        .level{
            display: flex;
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #666f83;
            line-height: 30px;
            img{
                width: 24px;
                height: 24px;
                margin-top: 3px;
                margin-right: 4px;
            }
        }
    }
    .bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: #ffffff;
        padding: 0 360px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px 7px 11px 0px rgb(102 111 131);
        .left{
            display: flex;
            align-items: center;
            .btn{
                width: 166px;
                height: 50px;
                background: #e9f5ff;
                border-radius: 25px;
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                color: #268cff;
                line-height: 50px;
                margin-right: 40px;
                cursor: pointer;
            }
            .get{
                background: #268CFF !important;
                color: #ffffff !important;
            }
            .not{
                background: #ffb950 !important;
                color: #ffffff !important;
            }
            .mark{
                display: flex;
                cursor: pointer;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
                color: #9da3b2;
                line-height: 12px;
                img{
                    width: 24px;
                    height: 27px;
                }
            }
        }
        .right{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .btn{
                height: 22px;
                font-size: 16px;
                width: 83px;
                margin-left: 80px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                color: #268cff;
                line-height: 22px;
                cursor: pointer;
                margin-right: 20px;
                img{
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }
}
</style>